<template>
  <div class="productBox">
    <div class="item">
      <div class="title">投资领域：</div>
      <div class="optionTitleDiv">
        <div class="allOptionDiv">
          <div
            @click="selectType(1, -1)"
            :class="typeIndex == -1 ? 'optionDivSelected' : ''"
          >
            全部
          </div>
        </div>
        <div class="orderOptionDiv">
          <div
            @click="selectType(1, type.dictValue)"
            :class="
              typeIndex == type.dictValue
                ? 'optionDiv optionDivSelected'
                : 'optionDiv'
            "
            v-for="(type, index) in types"
            :key="index"
          >
            {{ type.dictLabel }}
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div class="title">轮次：</div>
      <div class="optionTitleDiv">
        <div class="allOptionDiv">
          <div
            @click="selectType(2, -1)"
            :class="roundIndex == -1 ? ' optionDivSelected' : ''"
          >
            全部
          </div>
        </div>
        <div class="orderOptionDiv">
          <div
            @click="selectType(2, type.dictValue)"
            :class="
              roundIndex == type.dictValue
                ? 'optionDiv optionDivSelected'
                : 'optionDiv'
            "
            v-for="(type, index) in turnList"
            :key="index"
          >
            {{ type.dictLabel }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { host } from "@/utils/config.js";
export default {
  data() {
    return {
      typeIndex: -1,
      roundIndex: -1,
      turnList: [],
      types: [],
      statusList: [],
    };
  },
  methods: {
    /**
     * 选择政策类别事件
     * @param type 被选中的政策类别对象
     * @param index 被选中的政策类别下标
     */
    selectType: function (type, data) {
      if (type == 1) {
        this.typeIndex = data;
      } else if (type == 2) {
        this.roundIndex = data;
      }
      this.$emit("select", {
        financingTurn: this.roundIndex == -1 ? "" : this.roundIndex,
        companyIndustry: this.typeIndex == -1 ? "" : this.typeIndex,
      });
    },
    async gettypeList() {
      // 调用公共方法中的查询字典表
      this.getDictList(
        this,
        `finance_financing_turn,policy_industry_type,finance_com_financing_status`
      ).then((res) => {
        //  融资的轮次
        if (res && res.finance_financing_turn) {
          this.turnList = res.finance_financing_turn;
        }
        this.types = res.policy_industry_type;
        this.statusList = res.finance_com_financing_status;
      });
    },
  },
  mounted() {
    this.gettypeList();
  },
};
</script>

<style lang="scss" scoped>
.productBox {
  height: auto;
  border: 1px solid #eeeeee;
  border-bottom: none;
  .item {
    border-bottom: 1px solid #eeeeee;
    position: relative;
    .title {
      width: 168px;
      background: #f1f1f1;
      height: 100%;
      font-size: 14px;
      font-weight: bold;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .optionTitleDiv {
      width: 790px;
      margin-left: 188px;
      display: flex;
      font-size: 14px;
      flex-wrap: wrap;
      padding: 10px 0;
      .allOptionDiv {
        margin-left: 20px;
        width: 44px;
        margin: 5px 10px;
        text-align: center;
        height: 26px;
        line-height: 26px;
        border-radius: 2px;
      }
      .optionDiv {
        padding: 0px 8px;
        margin: 5px 10px;
        border-radius: 2px;
        height: 26px;
        line-height: 26px;
      }
      .optionDiv:hover {
        cursor: pointer;
        transition: all 0.2s ease 0s;
      }
      .optionDivSelected {
        color: #ffffff;
        background-color: #ce0000;
      }
      .orderOptionDiv {
        display: flex;
        flex-wrap: wrap;
        width: 720px;
      }
    }
  }
}
</style>